<!--
 * @Author: your name
 * @Date: 2021-08-02 15:23:45
 * @LastEditTime: 2021-08-03 16:11:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\Home.vue
-->
// template中只能存放一个div
<template> 
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="400px">
      <el-carousel-item v-for="item in carousels" :key="item.id">
        <img :src="item.url" alt="">
      </el-carousel-item>
    </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="wrapper">
        <div class="plates">
          <div class="plate" v-for="i in 7" :key="i" >
           <div class="head">
             <div class="title">学术成果</div>
             <div class="more">更多&gt;&gt;</div>
             </div>
             <ul class="list">
              <li>湖北大学刘俊松教授应邀来校开展学术交流</li>
              <li>校领导检查指导本科招生录取工作</li>
              <li>关于推荐充实山西省非主要农作物品种认定专家库人选的通知</li>
             </ul>
           </div>
        </div>
      </div>
      </div>
    
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>
<script>
import {get} from '../utils/request'
import Header from './components/Header'
import Footer from './components/Footer.vue'
export default{
  //4.局部组件注册
  components:{
    Header,
    Footer
  },
  //1.数据
  data(){
    return {
      carousels:[]
    }
  },
  //2.生命周期钩子函数 -  在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
  },
  //3.方法，一般用来定义方法或者事件处理函数
  methods:{
    //加载轮播图数据
    loadCarousels(){
      let url='/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    },
    //加载板块数据
    loadCategoryAndArticles(){

    }
  }
}
</script>
  <style lang="scss" scoped>
  //定义颜色变量
$color_primary:#028b39;
.home{
  //头部样式
// 内容样式
.content{
  background-color: #ecf6f2;
  .carousel{
      img{
        width: 100%;
      }
    }
    .plates::after{
      display: block;
      content: '';
      clear: both;
    }
  .plates{
      padding: .5em 0;
      .plate{
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 400px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
        .head{
          display: flex;
          justify-content: space-between;
          .title{
            font-size: 18px;
            font-weight: bold;
            color: $color_primary;
          }
          .more{
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        ul.list{
          li{
            overflow: hidden;         //超出部分隐藏起来(只能隐藏本行)
            white-space: nowrap;      //不准换行
            text-overflow: ellipsis;  //超出部分变成省略号
            line-height: 2em;
            cursor: pointer;
          }
          li:hover{
            color: $color_primary;
          }
        }
      }
      .plate:nth-child(3n){
        margin-right: 0;
      }
    }
}
//底部样式
}
  </style>